<template>
  <div class="header">
    <el-card class="header-card">
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="8" v-if="headerShow">
          <div class="grid-content bg-purple">
            <el-row type="flex" justify="space-between">
              <el-col :span="4">
                <div class="grid-content bg-purple">
                  <div class="block">
                    <el-avatar :size="50" :src="headerImage"></el-avatar>
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple">
                  <el-link class="login-class" type="warning" disabled>曦澤欢迎登录</el-link>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  <el-tag style="margin-top: 10px;" class="goBack" type="danger" @click="goBack" effect="dark">
                    返回上一层
                  </el-tag>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="8" v-if="headerShow">
          <div class="grid-content bg-purple-light">
            <el-input style="border-radius: 10px;" placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input">
            </el-input>
          </div>
        </el-col>
        <el-col :span="6" v-if="headerShow">
          <div class="grid-content bg-purple">
            <el-tag type="info"><i class="el-icon-s-custom"></i>登录</el-tag>
            <el-tag type="warning"><i class="el-icon-s-check"></i> 注册</el-tag>
            <el-tag type="danger"><i class="el-icon-edit"></i> 写文章</el-tag>
          </div>
        </el-col>
        <el-col :span="16" v-if="!headerShow">
          <el-link class="title-class" type="warning" :underline="false">
            vue后台管理项目中使用froala-editor富文本编辑器教程
          </el-link>
        </el-col>
        <el-col :span="8" v-if="!headerShow">
          <el-row type="flex">
            <el-col :span="10">
              <el-avatar :size="55" style="margin-top: -8px" src="https://empty">
                <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
              </el-avatar>
            </el-col>
            <el-col :span="24">
              <el-link :underline="false"
                       style="display: inline-block;text-align: center;font-size: 16px;margin-left: 8px;line-height: 38px;">
                风一样的男子
              </el-link>
            </el-col>
            <el-col :span="24">
              <el-button style="border: 1px solid red;color: red;border-radius: 30px">关注</el-button>
            </el-col>
            <el-col :span="24">
              <el-button style="margin-left: 10px;border-radius: 50px;" type="danger">赞赏支持</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data () {
      return {
        input: '',
        publicPath: process.env.BASE_URL,
        total: 250,
        scrollNumber: 0,
        headerShow: false,
        headerImage: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
      }
    },
    mounted () {
      // 监听滑轮滚动事件
      window.addEventListener('scroll', this.handleScroll, true)
    },
    watch: {},

    methods: {
      goBack () {
        if (window.history.length <= 1) {
          this.$router.push({ path: '/' })
          return false
        } else {
          this.$router.go(-1)
        }
      },
      handleScroll () {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop ||
          document.body.scrollTop
        const scroll = scrollTop - this.scrollNumber
        this.scrollNumber = scrollTop
        if (scroll > 300) {
          // this.headerShow = false
        } else {
          // this.headerShow = true
        }
      },
      handleClick () {
        alert(11)
      }
    }
  }
</script>

<style lang="scss">
  .header {
    color: #333333;
    margin: 0 auto;
    /*width: 2000px !important;*/
  }

  .header-card {
    height: 80px;
    margin-top: -7px;
    /*position: absolute;*/
    /*top: 0;*/
    /*z-index: 999*/
  }

  .el-input {
    width: 150px;
    border-radius: 40px;
    height: 38px;
  }

  .el-tag {
    margin: 0 10px;
  }

  .goBack {
    cursor: pointer
  }

  .title-class {
    text-align: center;
    display: inline-block;
    height: auto;
    width: 100%;
    font-size: 25px !important;
  }

  .login-class {
    font-size: 18px;
    text-align: left;
    display: inline-block;
    width: 100%;
    line-height: 50px;
  }
</style>
